<template>
  <div v-show=" activeCus.value.userId != 0 ">
    <template>
      <span class="nicheng" @click="wuhuaniu.dialogVisible = true">
        {{ activeCus.value.nicheng || `userId:${activeCus.value.userId}` }}
      </span>
      <el-dialog
        title="五花牛相关登录信息"
        append-to-body
        :visible.sync="wuhuaniu.dialogVisible"
        :width="isMobile?'80%':'40%'">
        <el-descriptions title="" size="mini" :column="isMobile?1:3">
          <el-descriptions-item>
            <template slot="label">用户名</template>
            {{ wuhuaniu.userName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">密码</template>
            {{ wuhuaniu.password }}
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="doCopy()">复制</el-button>
          <el-button type="primary" @click="wuhuaniu.dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <template>
        <LoginInfo ref="loginInfo"
          :loginCount="loginCount"
          :uidKey="`userId`"
          :uidValue="userId"
          :apiName="`getAppCustomerLoginInfo`"
        ></LoginInfo>
      </template>
      <template v-if="!isMobile">
        <div class="infoRow" v-if="customerInfo.isDeal">
          <b style="color:green">已成交</b>
          <span class="infoRow"><b>客服归属：</b>{{customerInfo.serviceName||'--'}}</span>
          <span class="infoRow"><b>客户ID：</b>{{customerInfo.customerCode||'--'}}</span>
          <span class="infoRow"><b>类型：</b>{{customerInfo.orderType||'--'}}</span>
          <span class="infoRow"><b>购买类型：</b>{{customerInfo.buyProdcut||'--'}}</span>
          <span class="infoRow"><b>金额：</b>{{customerInfo.money||'--'}}</span>
          <br>
          <span class="infoRow"><b>服务起始日期：</b>{{customerInfo.serverBeginTime||'--'}}</span>
          <span class="infoRow"><b>服务结束日期：</b>{{customerInfo.serverEndTime||'--'}}</span>
          <span class="infoRow"><b>正式时长：</b>{{customerInfo.formalServiceCycle||'--'}}</span>
          <span class="infoRow"><b>赠送时长：</b>{{customerInfo.giveServiceCyde||'--'}}</span>
          <br>
          <span class="infoRow"><b>销售人员：</b>{{customerInfo.saleName||'--'}}</span>
          <span class="infoRow"><b>订单状态：</b>{{customerInfo.customerOrderState||'--'}}</span>
          <span class="infoRow"><b>添加时间：</b>{{customerInfo.addTime||'--'}}</span>
        </div>
        <div class="infoRow" v-else>
          <b style="color:red">未成交</b>
          <span class="infoRow"><b>用户层级：</b>{{customerInfo.userClass||'--'}}</span>
          <span class="infoRow"><b>电话号码：</b>{{telShow ||'--'}}</span>
          <br>
          <div class="summary">
            <span class="infoRow" v-if="customerInfo.incomingInfoList[0]"><b>进线时间：</b>{{ customerInfo.incomingInfoList[0]['进线时间'] }}</span>
            <span class="infoRow" v-if="customerInfo.incomingInfoList[0]"><b>进线渠道：</b>{{ customerInfo.incomingInfoList[0]['进线渠道'] }}</span>
            <span class="infoRow" v-if="customerInfo.incomingInfoList[0]"><b>关注状态：</b>{{ customerInfo.incomingInfoList[0]['关注状态'] }}</span>
            <span class="infoRow" v-if="customerInfo.incomingInfoList[0]"><b>归属工作台：</b>{{customerInfo.incomingInfoList[0]['归属工作台'] }}</span>
            <span class="infoRow" v-if="customerInfo.incomingInfoList[0]"><b>归属销售：</b>{{ customerInfo.incomingInfoList[0]['归属销售'] }}</span>
            <i class="fa fa-fw fa-caret-down" v-if="customerInfo.incomingInfoList.length > 1" @click="showOther"></i>
          </div>
          <template v-if="customerInfo.incomingInfoList.length > 1">
            <div class="details" v-show="isShow">
              <template v-for="(item,k) in customerInfo.incomingInfoList.slice(1)">
                <span class="infoRow" :key="`${k}a`"><b>进线时间：</b>{{ item['进线时间'] }}</span>
                <span class="infoRow" :key="`${k}b`"><b>进线渠道：</b>{{ item['进线渠道'] }}</span>
                <span class="infoRow" :key="`${k}c`"><b>关注状态：</b>{{ item['关注状态'] }}</span>
                <span class="infoRow" :key="`${k}d`"><b>归属工作台：</b>{{ item['归属工作台'] }}</span>
                <span class="infoRow" :key="`${k}e`"><b>归属销售：</b>{{ item['归属销售'] }}</span>
                <br :key="`${k}z`">
              </template>
            </div>
          </template>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'dialogHeader',
  components: {
    LoginInfo: () => { return import('../../../components/登录记录.vue') },
  },
  computed:{
    ...mapState([
      'isMobile','conditional'
    ]),
    telShow:function(){
      //这里是特例处理（临时）
      if(['60'].includes(this.conditional.companyEmployeeId)){
        return this.customerInfo.phoneNumber;
      }
      //后期可能有黑白名单，反正这些需求很没规律
      if(['中级会员'].includes(this.customerInfo.userClass)){
        return this.customerInfo.phoneNumber.replace(/(\d{3})\d+(\d{4})/,'$1****$2');
      }
      if(['高级会员'].includes(this.customerInfo.userClass)){
        return this.customerInfo.phoneNumber.replace(/(\d{3})\d+(\d{4})/,'$1*****$2');
      }
      return this.customerInfo.phoneNumber;
    }
  },
  data() {
    return {
      isShow:false,
      userId:0,
      loginCount:0,
      wuhuaniu:{
        dialogVisible:false,
        userName:'',
        password:'',
      },
      customerInfo:{
        serviceName:'--',
        customerCode:'--',
        orderType:'--',
        buyProdcut:'--',
        money:'--',
        serverBeginTime:'--',
        serverEndTime:'--',
        formalServiceCycle:'--',
        giveServiceCyde:'--',
        saleName:'--',
        customerOrderState:'--',
        addTime:'--',

        userClass:'--',
        phoneNumber:'--',
        incomingInfoList:[],
      }
    }
  },
  inject:[
    'activeCus',//从index.vue依赖注入的客户信息,取值value
  ],
  watch:{
    'activeCus':{
      deep:true,
      handler:function(nv,ov){
        let userId = nv.value.userId;
        this.userId = userId;
        this.getCustomerInfo(userId);
        this.getLoginCount(userId);
      }
    }
  },
  methods: {
    test(){},
    doCopy: function () {
      let tVue = this;
      let text = `用户名：${tVue.wuhuaniu.userName}密码：${tVue.wuhuaniu.password}`;
      this.$copyText(text).then(function (e) {
        tVue.$message({
          message: '复制成功',
          type: 'success'
        });
      }, function (e) {
        tVue.$message({
          message: '复制失败',
          type: 'error'
        });
      })
    },
    showOther(){
      this.isShow = !this.isShow;
    },
    getLoginCount(value){
      this.$api.getAppLoginCount({userId:value}).then((res)=>{
        if(res.data.code == 200) {
          this.loginCount = _.isNull(res.data.data) ? 0 : res.data.data;
        }
      }).catch(err=>{
        this.$message({
          message: err.message,
          type: 'error',
          duration: 3000,
        });
      })
    },
    getCustomerInfo(userId){
      let ceid = this.$store.getters.getCEID(true);
      this.$api.getCustomerInfo({
        companyEmployeeId:ceid,
        userId:userId,
      }).then((res)=>{
        if(res.data.code == 200) {
          return Promise.resolve(res.data.data)
        }
      }).then(res=>{
        this.formatCustomerInfo(res)
        this.wuhuaniu.userName = _.get(res,'appUserInfo.userName','');
        this.wuhuaniu.password = _.get(res,'appUserInfo.password','');
        
      }).catch(err=>{
        this.$message({
          message: err.message,
          type: 'error',
          duration: 3000,
        });
      })
    },
    formatCustomerInfo(data){
      this.isShow = false;
      let obj = {}
      if(!_.isNull(data)) {
        if( data.isDeal ){
          obj = {
            serviceName:        data.serviceName,
            customerCode:       data.customerCode,
            orderType:          data.orderType,
            buyProdcut:         data.buyProdcut,
            money:              data.money,
            serverBeginTime:    data.serverBeginTime,
            serverEndTime:      data.serverEndTime,
            formalServiceCycle: data.formalServiceCycle,
            giveServiceCyde:    data.giveServiceCyde,
            saleName:           data.saleName,
            customerOrderState: data.customerOrderState,
            addTime:            data.addTime,
          }
        }else{
          let list = data.incomingInfoList.length==0?[{
            '进线时间':'--',
            '进线渠道':'--',
            '关注状态':'--',
            '归属工作台':'--',
            '归属销售':'--',
          }]:data.incomingInfoList.map((v,i,a)=>{
            return {
              '进线时间':v.incomingTime||'--',
              '进线渠道':v.fromSourceName||'--',
              '关注状态':['--','已激活','已禁用','--','未激活','退出企业'][v.status],
              '归属工作台':v.esCompanyName||'--',
              '归属销售':v.employeeNameList.join('，')||'--',
            }
          });
          obj = {
            userClass:          data.userClass,
            phoneNumber:        data.phoneNumber,
            incomingInfoList:   list,
          }
        }
      }
      this.customerInfo = Object.assign(
        {
          serviceName:'--',
          customerCode:'--',
          orderType:'--',
          buyProdcut:'--',
          money:'--',
          serverBeginTime:'--',
          serverEndTime:'--',
          formalServiceCycle:'--',
          giveServiceCyde:'--',
          saleName:'--',
          customerOrderState:'--',
          addTime:'--',

          userClass:'--',
          phoneNumber:'--',
          incomingInfoList:[],
        },
        { isDeal:_.isNull(data) ? false : data.isDeal, },
        obj
      )
    }
    
  },
}
</script>

<style lang="less" scoped>
	@import url('../../../assets/config.less');
	@import url('../../../assets/style.less');
	.cusName{
	  font-size: 16px;
	  line-height:22px;
		border-bottom: 1px solid #111111;
		&:hover{
			cursor: pointer;
		}
	}
.nicheng{ min-width:8em; }
.infoRow{
  display:inline-block;
  font-size:14px;
  line-height:24px;
  .label{
    font-size:12px;
    color:#999;
		width: 25%;
		text-align: right;
  }
}
.summary{
  position: relative;
}
.details{
  position: absolute;
  background:#fff;
}
</style>
